<html>
	<head>
		<meta charset="UTF-8"/>
		<style>
			body{
				font-family:"微软雅黑";
				font-size:14px;
			}
		</style>
	</head>
	<body>
		<div class="dialog">
			<div class="tabs">
				<div class="tab active" for="entity_panel">实体</div>
				<div class="tab" for="panel_property">属性</div>
				<div class="tab" for="panel_action">行为</div>
			</div>
			<div class="panels">
				<!-- 实体面板 -->
				<div class="panel entity_panel active">
					<div>
						<div class="label">实体名</div>
						<input class="entityName" type="text"/>
					</div>
					<div>
						<div class="label">实体类型</div>
						<select class="entityType" style="height:22px;">
							<option value="Entity">Entity</option>
							<option value="AbstractEntity">AbstractEntity</option>
							<option value="ValueObject">ValueObject</option>
							<option value="MappedSuperClass">MappedSuperClass</option>
						</select>
					</div>
					<div>
						<div class="label">实体范围</div>
						<select class="entityScope" style="height:22px;">
							<option value="public">public</option>
							<option value="private">private</option>
							<option value="protected">protected</option>
							<option value="package">package</option>
						</select>
					</div>
					<div>
						<div class="label" style="vertical-align:top;">备注</div>
						<textarea class="desc" style="height:100px;margin-top:2px;"></textarea>
					</div>
				</div>
				
				<!-- 属性面板 -->
				<div class="panel panel panel_property">
					<div>
						<div class="label">属性名</div>
						<input type="text" />
					</div>
					<div>
						<div class="label">可见性</div>
						<select style="height:22px;">
							<option value="public">public</option>
							<option value="private">private</option>
							<option value="protected">protected</option>
							<option value="package">package</option>
						</select>
					</div>
					<div>
						<div class="label">类型</div>
						<input type="text" list="type_tip"/>
					</div>
					<div>
						
					</div>
					<div>
						<table style="font-size:14px">
							<tr>
								<td><input type="checkbox" name="isUnique"/>isUnique</td>
								<td><input type="checkbox" name="isStatic"/>isStatic</td>
								<td><input type="checkbox" name="isOrdered"/>isOrdered<br/></td>
							</tr>
							<tr>
								<td><input type="checkbox" name="isDerived"/>isDerived</td>
								<td><input type="checkbox" name="isLeaf"/>isLeaf</td>
								<td><input type="checkbox" name="isReadOnly"/>isReadOnly</td>
							</tr>
						</table>
					</div>
					<table class="properties" border="1" width="100%" cellspacing=0 style="font-size:14px">
						<tr class="property">
							<th>属性名</th>
							<th>属性类型</th>
							<th>初始值</th>
						</tr>
						<tr>
							<td>emails</td>
							<td>List</td>
							<td>null</td>
						</tr>
					</table>
				</div>
				
				<!-- 行为面板 -->
				<div class="panel panel_action">
					<div>
						<div class="label">行为名</div>
						<input class="actionName" type="text"/>
					</div>
					<div>
						<div class="label">作用范围</div>
						<select class="actionScope" style="height:22px;">
							<option value="public">public</option>
							<option value="private">private</option>
							<option value="protected">protected</option>
							<option value="package">package</option>
						</select>
					</div>
				</div>
			</div>
		</div>		
		<datalist id="type_tip">
			<option value="String"></option>
			<option value="Set"></option>
			<option value="List"></option>
			<option value="Date"></option>
			<option value="Long"></option>
			<option value="Integer"></option>
		</datalist>
	</body>
	<script src="lib/jquery-2.1.0.min.js"></script>
	<script>
		(function($){
			$.fn.tab = function(){
				var TAB = $(this),
					TABS = TAB.find(".tabs"),
					PANELS = TAB.find(".panels");
					
				TABS.delegate(".tab","click",function(){
					var thiz = $(this);
					if(!thiz.is(".active")){
						TABS.find(".active").removeClass("active");
						thiz.addClass("active");
						PANELS.find(".active").removeClass("active");						
						PANELS.find("."+thiz.attr("for")).addClass("active");
					}
				});
			}
		})($);
		
		$(".dialog").tab();
	</script>
</html>
